---
slug: examples
title: Highway - Examples | Transitions
layout: default
next_url: examples/anchors.html
next_label: URL Anchors
---

<h1>Transitions</h1>
<p>Transitions are one of the key part of Highway and they can be created by extending <code>Highway.Transition</code>.<br> The documentation uses Highway to showcase its capabilities and a simple fade transition to have a nice and smooth transition between pages. Read more of the <a href="{{ site.url }}/get-started.html#transitions">documentation</a> about transitions.</p>

<h2 id="default-transitions"><a href="#default-transitions">Default Transition</a></h2>
<pre>
<code>// File: fade.js
// Import Highway
import Highway from '@dogstudio/highway';

// GSAP Library
import Tween from 'gsap';

// Fade
class Fade extends Highway.Transition {
  in({ from, to, done }) {
    // Reset Scroll
    window.scrollTo(0, 0);

    // Remove Old View
    from.remove();

    // Animation
    Tween.fromTo(to, 0.5,
      { opacity: 0 },
      {
        opacity: 1,
        onComplete: done
      }
    );
  }

  out({ from, done }) {
    // Animation
    Tween.fromTo(from, 0.5,
      { opacity: 1 },
      {
        opacity: 0,
        onComplete: done
      }
    );
  }
}

export default Fade;
</code>
</pre>

<pre>
<code class="js">// File: main.js
// Import Highway
import Highway from '@dogstudio/highway';

// Import Transitions
import Fade from 'path/to/fade.js';

// Call Highway.Core once.
const H = new Highway.Core({
  transitions: {
    default: Fade
  }
});
</code>
<a href="{{ site.url }}" class="button button--full">Try me</a>
</pre>

<h2 id="contextual-transition"><a href="#contextual-transition">Contextual Transition</a></h2>
<p>Since the documentation uses Highway it has access to all features available including contextual transitions which are specific transitions attached to links to override the transition related to the page depending on the context the link is. Read more of the <a href="{{ site.url }}/get-started.html#contextual-transitions">documentation</a> about contextual transitions.</p>

<pre>
<code class="html">&lt;!-- File: index.html --&gt;
&lt;a href="path/to/page" data-transition="overlap"&gt;&lt;/a&gt;
</code>
</pre>

<pre>
<code>// File: overlap.js
// Highway
import Highway from 'highway';

// GSAP
import Tween from 'gsap';

// Fade
class Overlap extends Highway.Transition {
  in({ from, to, done }) {
    // Reset Scroll
    window.scrollTo(0, 0);

    // Animation
    Tween.fromTo(to, 0.5,
      { opacity: 0 },
      {
        opacity: 1,
        onComplete: done
      }
    );

    // Animation
    Tween.fromTo(from, 0.5,
      { opacity: 1 },
      {
        opacity: 0,
        onComplete: () => {
          // Set New View in DOM Stream
          to.style.position = 'static';

          // Remove Old View
          from.remove();
        }
      }
    );
  }

  out({ done }) {
    done();
  }
}

export default Overlap;
</code>
</pre>

<pre>
<code class="js">// File: main.js
// Import Highway
import Highway from '@dogstudio/highway';

// Import Transitions
import Fade from 'path/to/fade.js';
import Overlap from 'path/to/overlap.js';

// Call Highway.Core once.
const H = new Highway.Core({
  transitions: {
    default: Fade,
    contextual: {
      overlap: Overlap
    }
  }
});
</code>
<a href="{{ site.url }}" data-transition="overlap" class="button button--full">Try me</a>
</pre>
